<template>
  <div>
    <div class="main w">
      <div class="right1">
        <div class="rightTop1" style="height: 50px;padding: 7px 15px;">
          <span class="depName">当前单位:</span>
          <span class="rateName">{{departmentName}}</span>
        </div>
        <!-- 教师层级 -->
        <el-tabs v-model="employeeTab" @tab-click="employeeClassResult" tab-position>
          <el-tab-pane label="参评情况" name="参评情况">
            <!-- 参评情况 -->
            <div class="tabContent">
              <div class="participationTop">
                <div class="collectResult">
                  <p>
                    单位总人数：
                    <span class="spanClass">{{totalCountS}}</span>人
                  </p>
                  <p>
                    已参评人数：
                    <span class="spanClass">{{participationDetailData.participationCount}}</span>人
                  </p>
                  <p>
                    未参评人数：
                    <span class="spanClass">{{nonparticipant}}</span>人
                  </p>
                  <p>
                    全部完成人数：
                    <span class="spanClass">{{participationDetailData.fullFinishedCount}}</span>人
                  </p>
                </div>
                <div class="collectRate">
                  <span>全部评价完成率:</span>
                  <div class="collectRateContent" style="margin-bottom: 12px;">
                    <el-progress
                      :text-inside="true"
                      :stroke-width="22"
                      :percentage="fullFinishedRate"
                      color="rgba(142, 113, 199, 0.7)"
                    ></el-progress>
                  </div>
                  <span>当前部门参评率:</span>
                  <div class="collectRateContent">
                    <el-progress
                      :text-inside="true"
                      :stroke-width="23"
                      :percentage="participationRate"
                      color="rgba(112, 143, 129, 0.7)"
                    ></el-progress>
                  </div>
                </div>
              </div>
              <!-- 完成率列表 -->
              <div v-show="participationDetailData.fullFinishedCount != 0" class="fullFinishedList">
                <div class="fullFinishedTit">全部评价完成人员列表 :</div>
                <ul>
                  <li
                    class="fullFinishedLi"
                    v-for="items in participationDetailData.fullFinishedList"
                    :key="items"
                  >
                    <span class="fullName">{{items}}</span>
                    <span class="collectRateContent">
                      <el-progress
                        :text-inside="true"
                        :stroke-width="19"
                        :percentage="100"
                        color="rgb(133, 211, 133)"
                      ></el-progress>
                    </span>
                  </li>
                </ul>
              </div>
              <!-- 已参评人数列表 -->
              <div class="participationEchartsBox">
                <div class="participationLeft participationEchartsContent">
                  <span class="joinTitle">未参评人数：{{nonparticipant}} 人</span>
                  <ul>
                    <li v-for="itemss in participationDetailData.unParticipationList" :key="itemss">
                      <el-tag size="mini">{{itemss}}</el-tag>
                    </li>
                  </ul>
                </div>
                <!-- echarts盒子 -->
                <div
                  id="participationEcharts"
                  class="participationCenter participationEchartsContent"
                ></div>
                <div class="participationRight participationEchartsContent">
                  <span class="joinTitle">已参评人数：{{participationCount}} 人</span>
                  <ul>
                    <li v-for="itemss in participationDetailData.participationList" :key="itemss">
                      <el-tag size="mini" type="success">{{itemss}}</el-tag>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            v-if=" isParticipation != 0 "
            v-for="item in employeeClassData"
            :key="item.id"
            :label="item.text"
            :name="item.text"
          >
            <div v-if=" item.text === employeeTab " class="rightMain" style="height: 100%;">
              <p class="totalEvaluate">
                参评人数：
                <span>{{departentResult.totalEvaluate}}</span> 人
              </p>
              <!-- 雷达图 -->
              <div style="width: 840px;height:360px;" class="chartsBox">
                <v-chartRadar
                  :titleText="radarData.resultTitle"
                  :indicatorName="indicatorName"
                  :opinionValue="opinionValue"
                ></v-chartRadar>
              </div>
              <!-- 引用饼图 -->
              <div
                v-show="index != 0"
                v-for="(chartItem , index) in statisticDataDtoList"
                :key="index"
                class="chartsBox"
              >
                <v-chartPie
                  :id="'pie'+index"
                  :titleText="chartItem.resultTitle"
                  :opinionData="dataInfoListData[index]"
                ></v-chartPie>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<style scoped>
/* alert提示框样式 */
.user-defined-style {
  top: 46%;
}

.totalEvaluate {
  margin-top: 0;
  padding: 0px 20px;
  height: 40px;
  line-height: 25px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
<script>
import bus from "../../components/common";
import { option2 } from "../../components/pie-option.js";
import chartPie from "../../components/chartPie.vue";
import chartRadar from "../../components/chartRadar";

export default {
  name: "departentResult",
  data() {
    return {
      //标签索引
      employeeClassData: [
        {
          id: 0,
          text: "全部人员"
        },
        {
          id: 1,
          text: "中层领导"
        },
        {
          id: 2,
          text: "教工代表"
        },
        {
          id: 3,
          text: "普通教师"
        }
      ],
      departentId: "", //部门id?
      employeeClassId: 0, //领导分级id
      employeeTab: "参评情况", //领导分级tabs名字
      isParticipation: 0, //是否参与评价
      departentResult: {}, //总结果
      dataInfoListData: [], //得分val容器
      dataInfoVal: [], //val值
      statisticDataDtoList: [], //评分结果列表
      radarData: [], //雷达数据
      indicatorName: [], //雷达名称
      opinionValue: [], //雷达数值
      index: 0, //图表索引
      tableRowClassName: "",
      pageLen: 0, //总条数
      commentData: [], //获取到的评论数据
      currentPage: 1, //当前默认加载的页码
      pageSize: 20, //页容量
      //参评详情数据
      participationDetailData: {},
      totalCountS: "", // 部门总人数
      nonparticipant: "", //未参评人数
      participationCount: "", //已参评人数
      fullFinishedRate: 0, //全部完成率
      participationRate: 0 //部门参评率
    };
  },
  components: {
    "v-chartRadar": chartRadar,
    "v-chartPie": chartPie
  },
  watch: {
    $route: function(newValue, oldValue) {
      this.drawClassEcharts();
      this.setFirstUrl(); //监听参评路由情况
    }
  },
  created() {},
  mounted() {
    this.employeeClassResult();
    this.drawClassEcharts(); //
    this.setFirstUrl(); //监听参评路由情况
  },
  methods: {
    //领导分类索引 0 - 4
    employeeClassResult(tab, event) {
      //  console.log("tab",tab,"event",event);
      if (tab != null) {
        this.employeeClassId = tab.index - 1;
      }
      if (this.employeeClassId == -1) {
        this.participationDetail(); //参评情况
      } else if (this.employeeClassId != 4) {
        this.drawClassEcharts(); //加载 图表
      }
    },
    //  查看人员层级评价情况分别请求接口
    drawClassEcharts() {
      //部门是否参与评价
      this.isParticipation = this.$route.query.isParticipation;
      // 判断路由是否有参数 ，如过没有默认Id等于1
      if (this.$route.query.depId == undefined) {
        bus.$on("depFirstId", firstId => {
          // 这里的firstId就是从departenList.vue中传来的数据
          // console.log("第一个集体部门id", firstId);
          this.departentId = firstId;
          const getFirstUrl = `api/department/statistics/count?departmentId=${firstId}&employeeClassificationId=${
            this.employeeClassId
          }`;
          this.setEmployeeClass(getFirstUrl); // 加载图表
        });
      } else {
        this.departentId = this.$route.query.depId;
      }
      const getUrl = `api/department/statistics/count?departmentId=${
        this.departentId
      }&employeeClassificationId=${this.employeeClassId}`;
      this.setEmployeeClass(getUrl); // 加载图表
    },
    // 获取数据渲染图表//发送人员层级评价数据
    setEmployeeClass(url) {
      this.axios.get(url).then(response => {
        if (response.data.data != null) {
          this.departentResult = response.data.data;
          this.departmentName = this.departentResult.departmentName;
          this.statisticDataDtoList = response.data.data.statisticDataDtoList; //详细得分情况
          // console.log("总结果数据列表", this.statisticDataDtoList);
          this.radarData = this.statisticDataDtoList[0];
          // console.log("雷达表", this.radarData);
          this.indicatorName = []; //清空
          this.opinionValue = []; //清空
          this.radarData.dataInfoList.forEach(j => {
            if (j.percent != null) {
              this.indicatorName.push({
                max: 100,
                name: j.name
              });
              this.opinionValue.push(j.percent);
            }
          });
          this.dataInfoListData = []; //清空
          this.statisticDataDtoList.forEach((item, index) => {
            // console.log("hkhkn", index);
            this.dataInfoVal = []; //清空
            item.dataInfoList.forEach((childItem, i) => {
              // console.log("kk", childItem);
              this.dataInfoVal.push({
                value: childItem.percent,
                name: childItem.name
              });
            });
            this.dataInfoListData.push(this.dataInfoVal);
            // console.log("fdgf", this.dataInfoListData);
          });
        }
      });
    },
    // 参评情况路由
    setFirstUrl(url) {
      //部门是否参与评价
      this.isParticipation = this.$route.query.isParticipation;
      // 判断路由是否有参数 ，如过没有默认Id等于1
      if (this.$route.query.depId == undefined) {
        bus.$on("depFirstId", firstId => {
          // 这里的firstId就是从departenList.vue中传来的数据
          // console.log("第一个集体部门id", firstId);
          this.departentId = firstId;
          const getFirstUrl = `api/department/statistics/participationDetail?departmentId=${
            this.departentId
          }`;
          this.participationDetail(getFirstUrl); // 加载图表
        });
      } else {
        this.departentId = this.$route.query.depId;
      }
      // console.log("部门", this.departentId);
      const getUrl = `api/department/statistics/participationDetail?departmentId=${
        this.departentId
      }`;
      this.participationDetail(getUrl); // 加载图表
    },
    // 参评情况图表
    participationDetail(url) {
      // const url = `api/department/statistics/participationDetail?departmentId=${
      //   this.departentId
      // }`;
      this.axios.get(url).then(res => {
        if (res.data.data != null) {
          this.departmentName = res.data.data.departmentName; //部门名称
          this.participationDetailData = res.data.data;
          this.fullFinishedRate = Number(
            this.participationDetailData.fullFinishedRate
          );
          // console.log("全部完成率", this.fullFinishedRate);
          this.participationRate = Number(
            this.participationDetailData.participationRate
          );
          // console.log("部门参评率", this.participationRate);
          this.totalCountS = this.participationDetailData.totalCount; //总人数
          this.participationCount = this.participationDetailData.participationCount; //未参加人数
          this.nonparticipant = this.totalCountS - this.participationCount; //已参加人数
          // console.log("总人数", this.totalCountS);
          // 绘制图表
          let myParticipationChart = this.$echarts.init(
            document.getElementById("participationEcharts")
          );
          myParticipationChart.setOption(option2);
          myParticipationChart.setOption({
            title: {
              text: "" //标题
            },
            tooltip: {
              trigger: "item",
              formatter: "{a} <br/>{b} : {c}人 ({d}%)"
            },
            color: ["rgb(151, 202, 175)", "rgb(133, 157, 192)"],
            series: [
              {
                name: "本部门参评情况",
                data: [
                  {
                    value: this.participationCount,
                    name: "已参评"
                  },
                  {
                    value: this.nonparticipant,
                    name: "未参评"
                  }
                ]
              }
            ]
          });
        }
      });
    }
  }
};
</script>
